<template>
    <div style="width:auto;height:250px;margin-top: -0.8rem;margin-left: 0.2rem" ref="chart"></div>
</template>

<script>
    //局部引用
    const echarts = require('echarts');
    export default{
        data(){
            return {

            }
        },
        methods: {
            initCharts(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(this.$refs.chart);
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: [{
                        data: ["小说","软件类","建筑类","美术类","文学类","医学类"],
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#1c9922'
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#eee",
                            }
                        },
                        splitLine: {//分割线配置
                            show:false,
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        // name:"借出数量:本",//y轴上方的单位
                        // nameTextStyle:{//y轴上方单位的颜色
                        //     color:'#41d524'
                        // },
                        axisLabel: {//y轴文字的配置
                            textStyle: {
                                color: "#eee",
                                margin: 15
                            },
                            formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {//y轴线的颜色以及宽度
                            show: true,
                            lineStyle: {
                                color: "green",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {//分割线配置
                            show:false,
                        }
                    }],
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20],
                        barWidth: 20, //柱子宽度
                        barGap: .5,
                        itemStyle: {
                            normal: {
                                color:'#76a9db',
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'orange',
                                        fontSize: 12
                                    }
                                }
                            }
                        }
                    }]
                });
            }
        },
        //一加载页面就调用
        mounted () {
            this.initCharts();
        }
    }
</script>
<style>
</style>

